<template>
  <div class="component">
    <Nav active-url="/tools" />
    <div class="container-center">
      <div class="bar-search">
        <div class="search-field">
          <input v-model="keyword" class="form-input form-lg" type="text" placeholder="输入关键字搜索" />
        </div>
      </div>
      <div class="list-blocks mt-lg">
        <div class="list-item" v-for="item in blocks" :key="item.text">
          <div class="caption caption-lead">
            <span class="text-14">{{item.text}}</span>
          </div>
          <div class="list-tools">
            <ul class="list-container">
              <li class="list-item" v-for="node in item.children" :key="node.text">
                <a class="item-link" :href="getMicroPath('#/tools/item/' + node.href)">
                  <span :class="'iconfont ' + node.icon"></span>
                  <span class="item-text">{{node.text}}</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* 首页页面 */
import Nav from '../../components/nav.vue'
import list from './index/list-tools.js'

export default {
  components: {
    Nav
  },
  data () {
    return {
      application: window.application,
      keyword: ''
    }
  },
  computed: {
    blocks () {
      let keyword = String(this.keyword).toLowerCase().trim()
      // 无关键字
      if (!keyword) {
        return list
      }
      let lists = list.map(node => {
        return Object.assign({}, node)
      })
      return lists.filter(node => {
        let isHasBlock = false
        let children = node.children
        children = Array.isArray(children) ? children : []
        node.children = children.map(item => item)
        node.children = node.children.filter(item => {
          let b = String(item.text || '').toLowerCase().indexOf(keyword) > -1 ||
                  String(item.href || '').toLowerCase().indexOf(keyword) > -1
          if (b) {
            isHasBlock = b
          }
          return b
        })
        return isHasBlock
      })
    }
  }
}
</script>

<style lang="less" scoped>
.bar-search {
  padding: 12px 0 0;
}
.list-blocks{
  padding: 15px 0;
  & > .list-item + .list-item{
    margin-top: 16px;
  }
}
.text-14{
  font-size: 14px;
  font-weight: 700;
}
.list-tools {
  overflow: hidden;
  padding: 8px 0;
  .list-item {
    overflow: hidden;
    float: left;
    padding: 8px 0;
    width: 25%;
    transition-duration: 0.4s;
    &:hover{
      border-color: #1abd9e;
      .item-link{
        color: #1abd9e;
      }
    }
  }
  @media (max-width: 780px) {
    .list-item {
      width: 50%;
      transition-duration: 0.4s;
    }
  }
  .item-link{
    line-height: 32px;
    transition-duration: 0.4s;
    &:link,&:visited{
      color: #333;
    }
  }
  .iconfont {
    float: left;
    margin-right: 8px;
    width: 32px;
    height: 32px;
    line-height: 30px;
    font-size: 20px;
    text-align: center;
    background: #1abd9e;
    border-radius: 4px;
    transition-duration: 0.4s;
    color: #fff;
  }
}
</style>
